<template>
  <div class="step2-container">
    <h1 class="title">确认挂号信息</h1>
    <!-- 展示就诊人信息的卡片 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button class="button" type="success" :icon="User" @click="goUserPatient">添加就诊人</el-button>
        </div>
      </template>
      <!-- 展示就诊人 -->
      <div class="user">
        <Visitor @click="changeIndex(index)" class="visitor" v-for="(visitor,index) in visitorArr" :key="visitor.id" :visitor="visitor" :index="index" :currentIndex="currentIndex"></Visitor>
      </div>
    </el-card>

    <!-- 展示医生信息的卡片 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!-- 展示医生信息 -->
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期:</div>
          </template>
          {{ docInfo.workDate? docInfo.workDate :'2024/1/31' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院:</div>
          </template>
          {{ docInfo.param?.hosname ? docInfo.param?.hosname : '北京人民医院' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">接诊科室:</div>
          </template>
          {{ docInfo.param?.depname ? docInfo.param?.depname : '急诊' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名:</div>
          </template>
           {{ docInfo.docname ? docInfo.docname : '如意' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称:</div>
          </template>
          {{ docInfo.title ? docInfo.title : '主任' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长:</div>
          </template>
          {{ docInfo.skill ? docInfo.skill : '外科手术' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费:</div>
          </template>
          <span class="money">{{ docInfo.amount ? docInfo.amount : '100' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 底部确定挂号的按钮 -->
    <div class="confirm">
        <el-button :disabled="currentIndex == -1?true:false" class="button" type="primary"  style="width: 150px ; height: 35px ;" @click="submitOrder">确定挂号</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from "vue";
// 引入路由
import { useRoute,useRouter } from "vue-router";
import { User } from "@element-plus/icons-vue";
// 引入就诊人卡片组件
// import Visitor from "./visitor.vue";
// 引入API
import { reqVisitor, reqDoctorInfo } from '@/api/hospital/index'
import { reqSubmitOrder } from '@/api/user/index'
// 引入ts类型
import { VisitorArr, VisitorResponseData, DoctorInfoData } from '@/api/hospital/type'
import { SubmitOrderResponseData } from '@/api/user/type'
import { ElMessage } from "element-plus";
// 获取路由|路由器 对象
let route = useRoute();
let router = useRouter();
// 存储全部就诊人信息
let visitorArr  = ref<VisitorArr>([])
// 存储挂号医生的信息
let docInfo = ref<any>({})
// 当前就诊人索引
let currentIndex = ref<number>(-1)

// 组件挂载完毕获取数据
onMounted(()=>{
  //获取就诊人信息
  getVisitorData();
  //获取挂号医生信息
  getDoctorInfo();
})
// 封装一个方法获取就诊人信息
const getVisitorData = async ()=>{
  const result: VisitorResponseData = await reqVisitor();
  if(result.code == 200){
    // 存储全部就诊人信息
    visitorArr.value = result.data
  }
}
// 封装一个方法获取挂号医生信息
const getDoctorInfo = async ()=>{
  const result: DoctorInfoData = await reqDoctorInfo(route.query.docId as string);
  if(result.code == 200){
    // 存储挂号医生的信息
    docInfo.value = result.data
  }
}
// 改变就诊人索引的回调
const changeIndex = (index:number)=>{
  currentIndex.value = index
}
// 点击确定挂号提交订单的回调
const submitOrder = async ()=>{
  // 医院编号
  let hoscode = docInfo.value.hoscode
  // 医生id
  let scheduleId = docInfo.value.id
  // 就诊人id
  let patientId = visitorArr.value[currentIndex.value].id
  // 发请求提交订单
  const result: SubmitOrderResponseData = await reqSubmitOrder(hoscode,scheduleId,patientId);
  if(result.code == 200){
    // 要是提交成功,携带orderId跳转到订单详情页面
    router.push({path:'/user/order',query:{orderId:result.data}})
  }else{
    ElMessage({
      type:'error',
      message:'提交订单失败'
    })
  }
}
// 点击添加就诊人按钮跳转到就诊人管理组件的回调
const goUserPatient = ()=>{
  router.push({path:'/user/patient',query:{type:'add'}})
}
</script>

<style scoped lang="scss">
.step2-container {
  margin-top: 20px;
  .money{
    color: red;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
    color: #7f7f7f;
    margin-bottom: 20px;
  }

  .box-card {
    margin: 20px 0px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .visitor {
        width: 31%;
        margin: 10px;
      }
    }
  }
  .confirm{
    margin: 15px 0px;
    display: flex;
    justify-content: center;
  }
}
</style>